<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>当前位置</el-breadcrumb-item>
      <el-breadcrumb-item>综合告警</el-breadcrumb-item>
      <el-breadcrumb-item
        ><a href="#/manualEntry" style="cursor: pointer; color: #fff"
          >人工录入</a
        ></el-breadcrumb-item
      >
    </el-breadcrumb>
    <el-radio-group v-model="radio" style="margin: 20px 0">
      <el-radio-button label="维度节点增量录入"></el-radio-button>
      <el-radio-button label="仪表增量录入"></el-radio-button>
    </el-radio-group>
    <div class="select">
      <div class="flex">
        <span>筛选维度：</span>
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <span style="margin-left: 10px">筛选节点：</span>
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <span style="margin-left: 10px">筛选类型：</span>
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <span style="margin-left: 10px">时间：</span>
        <el-date-picker
          v-model="value1"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
        <el-button type="primary" size="small" style="margin-left: 10px"
          >检索</el-button
        >
      </div>
      <div>
        <el-button
          type="primary"
          size="small"
          style="margin-left: 10px; margin-right: 10px"
          >手动录入</el-button
        >
        <el-button
          type="primary"
          size="small"
          style="margin-left: 10px; margin-right: 10px"
          >批量导入</el-button
        >
        <el-button
          type="primary"
          size="small"
          style="margin-left: 10px; margin-right: 10px"
          >导出模板</el-button
        >
        <el-button
          type="primary"
          size="small"
          style="margin-left: 10px; margin-right: 10px"
          >本页确认</el-button
        >
        <i class="el-icon-download" style="cursor: pointer"></i>
      </div>
    </div>
    <div>
      <el-table
        :data="tableData"
        style="width: 100%"
        cell-style="color:#fff"
        header-cell-style="color:#fff;background:rgb(27, 79, 133)"
      >
        <el-table-column prop="1" label="节点ID"> </el-table-column>
        <el-table-column prop="2" label="录入对象"> </el-table-column>
        <el-table-column prop="3" label="数据类型"> </el-table-column>
        <el-table-column prop="4" label="数据"> </el-table-column>
        <el-table-column prop="5" label="起始时间"> </el-table-column>
        <el-table-column prop="6" label="截止时间"> </el-table-column>
        <el-table-column prop="7" label="录入时间"> </el-table-column>
        <el-table-column prop="8" label="状态"> </el-table-column>
        <el-table-column prop="9" label="操作"> </el-table-column>
      </el-table>
    </div>
    <div style="margin: 20px 0; text-align: end">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20]"
        :page-size="1"
        layout="total, sizes, prev, pager, next, jumper"
        :total="0"
      >
      </el-pagination>
    </div>
    <div>
      <div id="main" style="height: 400px; width: 100%"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radio: "维度节点增量录入",
      tableData: [],
      currentPage: 0,
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    initCharts() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(
        document.getElementById("main"),
        "white",
        { renderer: "canvas" }
      );

      // 指定图表的配置项和数据
      var option = {
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: { type: "value" },
        legend: { bottom: "0%" },
        tooltip: {
          trigger: "axis",
          axisPointer: { type: "cross" },
        },
        series: [
          {
            type: "line",
            name: "Line 1",
            data: [140, 232, 101, 264, 90, 340, 250],
            smooth: true,
            stack: "Total",
            lineStyle: { width: 0 },
            symbolSize: 0,
            areaStyle: {
              opacity: 0.8,
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: "rgb(170,167,241)" },
                  { offset: 1, color: "white" },
                ],
              },
            },
            emphasis: { focus: "series" },
            itemStyle: {
              normal: {
                color: "rgb(127,93,242)",
                lineStyle: {
                  color: "rgb(127,93,242)",
                },
              },
            },
          },
          {
            type: "line",
            name: "Line 2",
            data: [120, 282, 111, 234, 220, 340, 310],
            smooth: true,
            stack: "Total",
            lineStyle: { width: 0 },
            symbolSize: 0,
            areaStyle: {
              opacity: 0.8,
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: "rgb(111,211,191)" },
                  { offset: 1, color: "white" },
                ],
              },
            },
            emphasis: { focus: "series" },
            itemStyle: {
              normal: {
                color: "rgb(0,191,139)",
                lineStyle: {
                  color: "rgb(0,191,139)",
                },
              },
            },
          },
          {
            type: "line",
            name: "Line 3",
            data: [320, 132, 201, 334, 190, 130, 220],
            smooth: true,
            stack: "Total",
            lineStyle: { width: 0 },
            symbolSize: 0,
            areaStyle: {
              opacity: 0.8,
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: "rgb(209,225,242)" },
                  { offset: 1, color: "white" },
                ],
              },
            },
            emphasis: { focus: "series" },
            itemStyle: {
              normal: {
                color: "rgb(94,162,254)",
                lineStyle: {
                  color: "rgb(94,162,254)",
                },
              },
            },
          },
          {
            type: "line",
            name: "Line 4",
            data: [220, 402, 231, 134, 190, 230, 120],
            smooth: true,
            stack: "Total",
            lineStyle: { width: 0 },
            symbolSize: 0,
            areaStyle: {
              opacity: 0.8,
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: "rgb(254,229,168)" },
                  { offset: 1, color: "white" },
                ],
              },
            },
            emphasis: { focus: "series" },
            itemStyle: {
              normal: {
                color: "rgb(250,179,0)",
                lineStyle: {
                  color: "rgb(250,179,0)",
                },
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
  },
  mounted() {
    this.initCharts();
  },
};
</script>

<style scoped>
.select {
  margin: 0 0 20px 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.el-select {
  width: 120px !important;
  /* border: 1px solid #fff !important; */
}

::v-deep .el-select,
::v-deep .el-input,
::v-deep .el-input__inner {
  height: 30px !important;
  background: none;
  color: #fff;
  /* border: 1px solid #fff; */
  border-radius: 0px;
  align-items: center;
  /* text-align: center; */
}

::v-deep .el-input__icon {
  line-height: 0px !important;
}

/*最外层透明*/
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
  background-color: transparent;
}
/* 表格内背景颜色 */
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
  background-color: transparent;
}

::v-deep.el-pagination__total {
  color: #fff;
}

::v-deep .el-radio-button__inner {
  background-color: transparent;
  border: none;
  color: #fff;
}

::v-deep .el-radio-button:first-child .el-radio-button__inner {
  border-radius: 0px;
  border-left: none;
}

::v-deep .el-radio-button:last-child .el-radio-button__inner {
  border-radius: 0px;
}

::v-deep .el-table tbody tr:hover > td {
  background-color: rgb(27, 79, 133) !important;
}

::v-deep .el-tree {
  position: relative;
  cursor: default;
  background: transparent;
  color: #fff;
}

::v-deep .el-tree-node > .el-tree-node__content:hover {
  background-color: rgb(27, 79, 133) !important;
}

::v-deep
  .el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  color: #fff;
  background: rgb(27, 79, 133) !important;
}

::v-deep .el-date-editor .el-range-input {
  background: transparent;
  color: #fff;
}

::v-deep .el-radio__label {
  color: #fff;
}

i {
  width: 30px;
  height: 30px;
}
</style>